<style lang="scss" scoped>
    .swiper-layer{
        width: 100%;
        height: 100%;
        background: #000000;
        color: #ffffff;
        
        .title-wrap{
            font-size: 18px;
            margin-bottom: 12px;
            text-indent: 16px;
            .swiper-process{
                float: right;
                margin-right: 17px;
                font-size: 12px;
                width: inherit;
                margin-top: 7px;
            }
        }
        .label-wrap {
            display: flex;
            flex-wrap: wrap;
            padding: 18px 0 0 11px;
            margin-bottom: 34px;
            .label-item {
                padding: 7px 14px;
                margin-right: 15px;
                border: 1px solid #ffffff;
            }
        }
        
        .gallery-top {
            width: 100%;
            img{
                width: 100%;
            }
        }
        .gallery-thumbs {
            box-sizing: border-box;
            padding: 6px 0;
        }
        .gallery-thumbs .swiper-slide {
            width: 25%;
            opacity: 0.6;
            img{
                width: 100%;
                filter: grayscale(100%);
            }
        }
        .gallery-thumbs .swiper-slide-active {
            opacity: 1;
            img{
                width: 100%;
                filter: grayscale(0%);
            }
        }
    }

</style>

<template>
    <div class="index-wrap">
        <!--图片详情层-->
        <div class="swiper-layer">
            <ul class="label-wrap">
                <li class="label-item">全部</li>
                <li class="label-item" @click="changeSource">场地A</li>
            </ul>
            <div class="title-wrap">
                全部
                <div class="swiper-process"></div>
            </div>
            <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
                <swiper-slide class="slide" v-for="(item,i) in slideArray" :key="i">
                    <img :src="item">
                </swiper-slide>
            </swiper>
            <!-- swiper2 Thumbs -->
            <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
                <swiper-slide class="slide" v-for="(item,i) in slideArray" :key="i">
                    <img :src="item">
                </swiper-slide>
            </swiper>
        </div>
        
    </div>
</template>

<script>
    import FooterComponent from '@/views/footer'
    export default {
        components: {
            FooterComponent
        },
        computed: {
        
        },
        
        filters: {},
        data() {
            return {
                slideArray: [
                    '/static/slide.png','/static/slide.png','/static/slide.png',
                    '/static/slide.png','/static/slide.png','/static/slide.png',
                ],
                swiperOptionTop: {
                    spaceBetween: 0,
                    pagination: {
                        el: '.swiper-process',
                        type: 'fraction'
                    }
                },
                swiperOptionThumbs: {
                    spaceBetween: 10,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    touchRatio: 0.2,
                    slideToClickedSlide: true,
                }
            };
        },
        mounted() {
            this.$nextTick(() => {
                const swiperTop = this.$refs.swiperTop.swiper
                const swiperThumbs = this.$refs.swiperThumbs.swiper
                swiperTop.controller.control = swiperThumbs
                swiperThumbs.controller.control = swiperTop
            })
        },
        methods: {
            //更换轮播图
            changeSource(){
                this.slideArray = []
                for(let i = 0; i < 7; i++){
                    this.slideArray.push('/static/img.png')
                }
                this.$refs.swiperTop.swiper.update()
                this.$refs.swiperThumbs.swiper.update()
                this.$refs.swiperTop.swiper.slideTo(0, 0, false);//切换到第一个slide，
            },
        }
    };
</script>

